<template>
	<view class="out-box">
		<!-- <view class="main">
			<view class="content">
				<uni-forms ref="baseForm" :border="true" :model="baseFormData" 
				labelWidth="180rpx"
				:rules="rules">
					<uni-forms-item label="联系人" required name="name">
						<uni-easyinput clearSize="40rpx" :styles="styleone" :inputBorder="false" v-model="baseFormData.name" placeholder="请填写称呼（必填）" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" required name="phone">
						<uni-easyinput type="number" clearSize="40rpx" :styles="styleone" :inputBorder="false" v-model="baseFormData.phone" placeholder="请填写联系电话（必填）" />
					</uni-forms-item>
					<uni-forms-item label="求租区域">
						<view class="Address">
							<view class="Address-item">
								<picker mode="multiSelector" :value="multiIndex" 
								:range="newAddressList" range-key="label"
									@change="pickerChange" @cancel="pickerCancel"
									 @columnchange="pickerColumnchange">
										<view class="uni-input">{{addressList.join('-')}}</view>
								</picker>
							</view>
							<view class="address_i"></view>
						</view>
					</uni-forms-item>
					<view class="hrone"></view>
					<view class="my_chebox">配套设施标签</view>
							<uni-data-checkbox multiple 
								v-model="checkbox2" 
								@change="checkboxarr(e)"
								 mode="tag" 
								selectedColor="#FF2020" 
								:localdata="hobby">
							</uni-data-checkbox>

					<uni-forms-item label="面积(㎡)" required  name="area">
						<uni-easyinput clearSize="40rpx" :styles="styleone" :inputBorder="false" v-model="baseFormData.area" placeholder="请填写所需店铺面积范围" />
					</uni-forms-item>

					<uni-forms-item label="租金(元/月)">
						<uni-easyinput clearSize="40rpx" type="number" :styles="styleone" :inputBorder="false" v-model="baseFormData.rent" placeholder="请填写接受租金范围不填默认面议" />
					</uni-forms-item>
					<uni-forms-item label="适合用途">
						<view class="Address">
							<view class="Address-item">
								<picker
								@change="colorChange" 
								:value="store_index" 
								:range="store_type" 
							>
									<view class="uni-input">{{store_type[store_index]}}</view>
								</picker>
							</view>
							<view class="address_i"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="是否急租" >
						<radio-group  class="radio-groud" @change="radioChange">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in rapid_turn" :key="item.value">
								<view class="radio-groud">
									<view style="width: 60rpx;height: 60rpx;">
										<radio  style="transform:scale(0.8)" :value="item.value" :checked="index === current" color="#FF2020"/>
									</view>
									<view style="width: 60rpx;height: 60rpx; color: black;">{{item.name}}</view>
								</view>
							</label>
						</radio-group> 
					</uni-forms-item>
					<view class="my_chebox">求租标题<span class="span1"> (点击输入框可更改标题)</span></view>
					<view class="feint_title">
						<input class="title_sty" type="text" :placeholderStyle="placeholderStyle"
						placeholder="请填写标题，可以让更多人查看增加曝光哟" v-on:focus="onfocus" v-model="baseFormData.title">
					</view>
				</uni-forms>
			</view>
		</view> -->

		<view class="user">
			<view class="user_item">
				<view class="name">联系人</view>
				<input class="user_input" v-model="baseFormData.name" placeholder="请填写联系人名称" :placeholder-style="placeholderStyle">
			</view>
			<view class="user_item">
				<view class="name">联系电话</view>
				<input class="user_input" v-model="baseFormData.phone" placeholder="请填写联系电话" :placeholder-style="placeholderStyle">
				<view class="isjy" v-show="baseFormData.isshowphone">请填写正确的联系方式</view>
			</view>
		</view>
		<view class="user">
			<view class="user_item">
				<view class="name">求租区域</view>
				<view class="Address">
							<view class="Address-item">
								<picker mode="multiSelector" :value="multiIndex" 
								:range="newAddressList" range-key="label"
									@change="pickerChange" @cancel="pickerCancel"
									 @columnchange="pickerColumnchange">
										<view class="uni-input">{{addressList.join('-')}}</view>
								</picker>
							</view>
							<view class="address_i"></view>
						</view>
			</view>
			<view class="user_item">
				<view class="name">面积 (m2)</view>
				<input class="user_input" v-model="baseFormData.area" placeholder="请填写所需房源面积范围" :placeholder-style="placeholderStyle">
			</view>
			<view class="user_item">
				<view class="name">租金(元/月)</view>
				<input class="user_input" v-model="baseFormData.rent" placeholder="请填写接受租金范围不填默认面议" :placeholder-style="placeholderStyle">
			</view>
		</view>
		<view class="facilities">
				<view class="facilities_item">
					<view class="name">所属行业或原用途</view>
					<view class="isjy" v-show="baseFormData.isshowshop_type_one">请选择所属行业或原用途</view>
					<view class="item_delete">
						<uni-data-picker clear-icon="false"  placeholder="请选择房源所属行业或原用途" 
							popup-title="请选择房源所属行业或原用途" :localdata="options"
							@change="onchange"  @popupopened="popupopened">
						</uni-data-picker>
						<image class="img" src="../../static/images/下箭头.png"></image>
					</view>
				</view>
				<view class="facilities_item">
					<view class="name">房源有什么配套设施及优势（非必填）</view>
					<view class="item_delete">
						<view class="text" v-show="!baseFormData.checkbox3" @tap="opencheckboxarr">请选择房源配套设施及优势</view>
						<view class="text1" v-show="baseFormData.checkbox3" @tap="opencheckboxarr">{{baseFormData.checkbox3}}</view>
						<image class="img" src="../../static/images/下箭头.png"></image>
					</view>
				</view>
			</view>
		<view class="adress">
			<view class="adressName">
				<view class="name">填写求租标题</view>
			</view>
			<textarea class="adressTextarea" v-model="baseFormData.title" :placeholder-style="placeholderStyle" placeholder="例如：上海嘉定区70㎡商铺需要做超市"></textarea>
		</view>
		<view class="SingleChoice">
			<view class="name">是否急租</view>
			<view class="chioce">
				<view class="chioce_item" @tap="radioChange(1)">
					<image class="img" v-show="baseFormData.Rapid  == 1" src="../../static/images/勾选2.png"></image>
					<image class="img" v-show="baseFormData.Rapid  == 0" src="../../static/images/可勾选2.png"></image>
					<view class="name">是</view>
				</view>
				<view class="chioce_item" @tap="radioChange(0)">
					<image class="img" v-show="baseFormData.Rapid  == 0" src="../../static/images/勾选2.png"></image>
					<image class="img" v-show="baseFormData.Rapid  == 1" src="../../static/images/可勾选2.png"></image>
					<view class="name">否</view>
				</view>
			</view>
		</view>
		<view class="buttom" @tap="to_release">资料提交</view>
	</view>
	
	<uni-popup ref="shopTypePupop" :safe-area="false">
		<view class="shopType">
			<view class="title">请选择房屋配套设施及优势</view>
			<view class="chacha" @tap="closecheckboxarr"></view>
			<viwe class="checkbox">
				<uni-data-checkbox multiple 
					v-model="checkbox2" 
					@change="checkboxarr(e)"
					mode="tag" 
					selectedColor="rgba(0, 92, 241, 1)" 
					:localdata="hobby">
				</uni-data-checkbox>
			</viwe>
			<view class="sure">
				<view class="colse" @tap="clearcheckboxarr">取消</view>
				<view class="qr" @tap="closecheckboxarr">确定</view>
			</view>
		</view>
	</uni-popup>
	<view>
		<Verify
				@success="checkSuccess"
				:mode="'pop'"
				:captchaType="'clickWord'"
				:imgSize="{ width: '330px', height: '155px' }"
				ref="verify"
			></Verify>
	</view>
</template>

<script setup>
import {ref,reactive,onBeforeMount,onMounted,watchEffect} from 'vue'
import areaData from '../../static/js/area-data1'
import {onGotApiData,addClick,ongetphone} from '../../util/api.js'
import Verify from "../../components/verify/verify"
import { options  } from '../../static/js/shop_type.js';
// 在组件渲染之前执行
onBeforeMount(() => {
	console.log('组件准备渲染',);
	baseFormData.channel_no = uni.getStorageSync('channel_no') || '';
	baseFormData.link = uni.getStorageSync('link') || '';
	// 判断一下有没有取到值
	// 判断一下有没有取到值
	const provinceone = uni.getStorageSync('province') || '';
	const cityone = uni.getStorageSync('city')|| '';
	const districtone = uni.getStorageSync('district')|| '';
	baseFormData.township = uni.getStorageSync('township')|| '';
	if(provinceone!= []&&provinceone!= ''&&cityone!= []&&cityone!= ''&&districtone!= []&&districtone!= ''){
		// 赋值到列表展示
		addressList[0] = provinceone
		addressList[1] = cityone
		addressList[2] = districtone
		// 赋值到表单提交
		baseFormData.province = provinceone
		baseFormData.city = cityone
		baseFormData.county = districtone
	}
	// user_id.value = uni.getStorageSync('user_id') || '';
	// 	// 如果没有user_id跳转到授权页
	// if(!user_id.value){
	// 	uni.navigateTo({
	// 		url: '/pages/login/login'
	// 	});
	// }
	// 初始化地区的数组
	initAddress();
	
})
// 在组件渲染完成后执行
onMounted(() => {
	console.log('组件已经渲染完毕');
})


let styleone = reactive({borderColor: '#FFF'})
let styletwo = reactive({background:'#FFF'})
let user_id = ref(null)

// 表单部分内容
let baseFormData = reactive({
			channel_no:'',
			title:'',
			name: '',
			title:'',
			phone:'',
			area:'',
			rent:'',
			transference:'',
			introduce:'',
			// 封面图片
			cover_img:'',
			province:'北京市',
			city:'北京市',
			county:"东城区",
			township:'',
			checkbox3:'',
			shop_type:'',
			Rapid:1,
			imgs:[],
			// 详细地址
			detail_address:'',
			link:'',
			yzmcode:null,
			codeshow:true,
			shop_type_one:'',
			shop_type_otwo:'',
			isshowshop_type_one:false, //校验联级的时候是否显示
			isshowphone:false, //校验电话的时候不合格
		})

// 监听响应式数据的变化
let title = ref('')
watchEffect(() => {
	if(baseFormData.area){
		baseFormData.title =  '求租' + baseFormData.county + baseFormData.township + baseFormData.area+'㎡左右房源'+ (baseFormData.checkbox3?',需要配套设施有：':'')+baseFormData.checkbox3
	}
	// if(baseFormData.area){
	// 	baseFormData.title = '找' + baseFormData.county + baseFormData.area+'㎡'+'左右商铺做'+ baseFormData.shop_type
	// }
});	

// 提示文字的样式
let placeholderStyle = ref("font-size:28rpx")
// 输入框获取到焦点事件
const onfocus = () =>{
	console.log('我获取到了焦点')
	// baseFormData.title = title.value
}
// 表单校验规则
let rules = reactive({
				name: {
					rules: [{
						required: true,
						errorMessage: '姓名不能为空'
					}]
				},
				phone: {
					rules: [{
						required: true,
						errorMessage: '手机号不能为空'
					},
					{
						minLength: 10,
						maxLength: 11,
						errorMessage: '请填写正确手机号',
					},
					{
						pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
						errorMessage: '请填写正确手机号',
					}]
				},
				// title: {
				// 	rules: [{
				// 		required: true,
				// 		errorMessage: '标题不能为空'
				// 	}]
				// },
				area: {
					rules: [{
						required: true,
						errorMessage: '面积不能为空'
					}]
				}

			})	

// 店铺地址全部变量以及方法
const oldAddressList = reactive(areaData)
const newAddressList = reactive([
	[],
	[],
	[]
])
// 最后显示的值
const addressList = reactive(['北京市', '北京市', '东城区'])
const tempAddressList = reactive([])
// 列表中的值
const multiIndex = reactive([])

	// 取消时候触发的
const initMultiIndex = () => {
	if (!addressList) {
		multiIndex[0] = 0;
		multiIndex[1] = 0;
		multiIndex[2] = 0;
		return;
	}
	const province = addressList[0];
	const city = addressList[1];
	const area = addressList[2];

	const provinceObj = oldAddressList.find(item => item.label === province);
	const provinceIndex = oldAddressList.findIndex(item => item.label === province);

	console.log(provinceObj)
	const cityObj = provinceObj.children.find(item => item.label === city);
	const cityIndex = provinceObj.children.findIndex(item => item.label === city);

	const areaObj = cityObj.children.find(item => item.label === area);
	const areaIndex = cityObj.children.findIndex(item => item.label === area);

	multiIndex[0] = provinceIndex
	multiIndex[1] = cityIndex
	multiIndex[2] = areaIndex
	console.log(multiIndex)
}

	// 把js中的数据遍历到这个数组上去
const initAddress = () => {
	initMultiIndex();

	newAddressList[0] = oldAddressList.map((item, index) => {
		var obj = {
			label: item.label,
			value: item.value
		}
		return obj
	})
	newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item, index) => {
		var obj = {
			label: item.label,
			value: item.value
		}
		return obj
	})
	newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map(
		(item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})

	console.log('newAddressList:', newAddressList);

}

	// value值改变时候触发
	const pickerChange = (e) => {
		console.log('pickerChange:', e.detail.value);
		const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
		const province = newAddressList[0][provinceIndex].label;
		const city = newAddressList[1][cityIndex].label;
		const area = newAddressList[2][areaIndex].label;
		console.log(province + '-' + city + '-' + area);
		baseFormData.province = province
		baseFormData.city = city
		baseFormData.county = area
		addressList[0] = province
		addressList[1] = city
		addressList[2] = area
	}
	
	// 某一列值改变时候触发
	const pickerColumnchange = (e) => {
		console.log('pickerColumnchange:', e);
		// 第几列滑动
		// console.log(e.detail.column);
		// 第几列滑动的下标
		// console.log(e.detail.value)
		// 第一列滑动
		if (e.detail.column === 0) {
			multiIndex[0] = e.detail.value;

			newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item,
				index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})
			multiIndex[1] = 0
			multiIndex[2] = 0;
			newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
				.children
				.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: item.label,
						value: item.value
					}
					return obj
				})

		}
		if (e.detail.column === 1) {
			multiIndex[1] = e.detail.value
			multiIndex[2] = 0;
			newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
				.children
				.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: item.label,
						value: item.value
					}
					return obj
				})
		}
		if (e.detail.column === 2) {
			multiIndex[2] = e.detail.value
		}
	}
	// 取消时候触发
	const pickerCancel = () => {
		initMultiIndex();
	}

	// 店铺类型的选择	
	let store_index = ref(0)
	let store_type = ref([
					'餐饮美食',
					 '百货超市',
					 '休闲娱乐',
					 '美容美发',
					 '教育培训',
					 '生活服务',
					 '汽车美容',
					 '酒店宾馆',
					 '服饰箱包',
					 '商铺租售',
					 '其他'
		])
	// 颜色筛选
	const colorChange = (e) =>{
		store_index.value = e.detail.value

		baseFormData.shop_type = store_type.value[store_index.value]
		console.log("选中的",baseFormData.shop_type)
	}

	// 单选框的内容
	// 这个是显示的，不是值
	let current = ref(1)

	const radioChange = (evt)=> {
			baseFormData.Rapid = evt
			console.log('我是单选框',baseFormData.Rapid )
		}
	


// 多选框	
let checkbox2 = ref([])
let hobby = reactive([{
					text: '临近地铁',
					value: '临近地铁'
				}, {
					text: '居民密集',
					value: '居民密集'
				},
				{
					text: '天然气',
					value: '天然气'
				},
				{
					text: '中央空调',
					value: '中央空调'
				},
				
				{
					text: '停车位',
					value: '停车位'
				},
				{
					text: '电话/网络',
					value: '电话/网络'
				},
				{
					text: '暖气',
					value: '暖气'
				},
				{
					text: '上水',
					value: '上水'
				},
				{
					text: '客梯',
					value: '客梯'
				},
				{
					text: '货梯',
					value: '货梯'
				},
				{
					text: '排烟',
					value: '排烟'
				},
				{
					text: '排污',
					value: '排污'
				},
				{
					text: '可明火',
					value: '可明火'
				},
				{
					text: '380V',
					value: '380V'
				},
				{
					text: '外摆区',
					value: '外摆区'
				},
				{
					text: '黄金地段',
					value: '黄金地段'
				},
				{
					text: '扶梯',
					value: '扶梯'
				},
				{
					text: '下水',
					value: '下水'
				},
				{
					text: '管煤',
					value: '管煤'
				},
				{
					text: '临街门面',
					value: '临街门面'
				},
				{
					text: '可餐饮',
					value: '可餐饮'
				},
				{
					text: '新房',
					value: '新房'
				},
				{
					text: '临街',
					value: '临街'
				},
				{
					text: '社区底商',
					value: '社区底商'
				},
				 {
					text: '可空转',
					value: '可空转'
				}])
	// 店铺的适用类型选择
	const shopTypePupop = ref(null) 
	const checkboxarr = () =>{
		console.log('我是多选框的内容',checkbox2.value)
		baseFormData.checkbox3 = checkbox2.value.join(',');
		console.log('我是多选框的内容',baseFormData.checkbox3)
	} 
	const opencheckboxarr = () =>{
		// 打开选择器
		shopTypePupop.value.open('bottom')
	}
	// 关闭选择器
	const closecheckboxarr = () =>{
		shopTypePupop.value.close()
	}
	// 取消选中并且关闭选择器
	const clearcheckboxarr = () =>{
		checkbox2.value = ""
		baseFormData.checkbox3 = ""
		closecheckboxarr()
	}
	// 联级弹出层弹出
	const popupopened = ()=>{
		baseFormData.isshowshop_type_one = false
	}
		// 选择完成时触发
	const onchange = (e) =>{
		console.log('e1',e)
		// 先把原来的清空
		baseFormData.shop_type_one = ''
		baseFormData.shop_type_two = ''
		baseFormData.shop_type = ''

		baseFormData.shop_type_one = e.detail.value[0].text
		baseFormData.shop_type_two = e.detail.value[1].text ||''
		if(e.detail.value.length >2){
			baseFormData.shop_type = e.detail.value[2].text || ''
		}
	}

	//勾选我已阅读
	const range_value = ref(0)
	let range = reactive([{"value": 1}])
	const click_confirm = () =>{
		// console.log("是否会勾选我同意",range_value.value)
		console.log("我是选中的值",range_value.value[0])
	}
	// 短信校验
	const yzcode = () =>{
		// 对手机号进行校验
		const phoneRegex = /^1[3456789]\d{9}$/;
		if(baseFormData.phone == '' || !phoneRegex.test(baseFormData.phone)){
			return uni.showToast({
				title: '请填写正确手机号',
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			})
		}else{
			//显示验证码
			verify.value.show('center')
		}
	}
		//初始化验证码组件
	const verify = ref(false)
	const checkSuccess=(data)=>{

		console.log("图形验证成功",data)
		//验证码验证成功操作
		 verify.value.hide();
		// 掉漆验证码接口
		let params = reactive({
			phone :  baseFormData.phone,
			channel_no:baseFormData.channel_no,
			captchaVerification:data.captchaVerification	
		})
		ongetphone('/public/send_code','POST',params,yzmcode_value)
	}
	// 验证码返回回调
	const yzmcode_value = (result) =>{
		console.log('result')
		if(result.code == 200){
			baseFormData.codeshow = false
			// 倒计时
			untime()
		}else{
			return uni.showToast({
				title: result.message,
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			})
		}
	}
	let unitime_value = ref(60)
	const untime = () =>{
		setInterval(()=>{
			if(unitime_value.value < 2){
				baseFormData.codeshow = true
				unitime_value.value = 60
				return
			}else{
				unitime_value.value --
			}
		}, 1000);
	}

// 确认发布 ,绑定ref
const baseForm = ref(null)
	// 发布加一个节流
let lastClickTime =ref(0)
const to_release = () => {
	const currentTime = Date.now();
	console.log("当前时间",currentTime)
	if (currentTime - lastClickTime.value > 1200) {
		// 执行支付
		release()
		lastClickTime.value = currentTime
	} else {
		lastClickTime.value = currentTime
	}
}
const release =() =>{

	addClick('H5发布求租信息页','确认发布')
			// 是否进行勾选
			// if(!range_value.value[0]){
			// 	return	uni.showToast({
			// 				title: '请勾选服务协议',
			// 				//将值设置为 success 或者直接不用写icon这个参数
			// 				icon: 'none',
			// 				//显示持续时间为 2秒
			// 				duration: 1500
			// 			}) 
			// 	}
					// 是否进行勾选
		if(!baseFormData.phone){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写电话',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}
		// 对手机号进行校验
		const phoneRegex = /^1[3456789]\d{9}$/;
			if(!phoneRegex.test(baseFormData.phone)){
				baseFormData.isshowphone = true
				return uni.showToast({
					title: '请填写正确的手机号',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}
			baseFormData.isshowphone = false

		if(!baseFormData.area){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写店铺面积',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}
		if(!baseFormData.rent){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写店铺租金',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}

		if(!baseFormData.shop_type_one){
				// 开启校验提示
			baseFormData.isshowshop_type_one = true
			return	uni.showToast({
					title: '请填写店铺原用途',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}
			if(baseFormData.county==[]||baseFormData.county==''||baseFormData.city==[]||baseFormData.city==''||baseFormData.province==[]||baseFormData.province==''){
				return uni.showToast({
						title: '请选择店铺地址',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 1500
					}) 
			}
			// if(!baseFormData.yzmcode){
			// 	return uni.showToast({
			// 			title: '请输入手机验证码',
			// 			//将值设置为 success 或者直接不用写icon这个参数
			// 			icon: 'none',
			// 			//显示持续时间为 2秒
			// 			duration: 1500
			// 		}) 
			// }
		// 标题赋值
		if(baseFormData.title == ''){
			baseFormData.title = title.value
		}

			// 表单请求环节
			let params = reactive({
				name : baseFormData.name,
				phone: baseFormData.phone,
				title:baseFormData.title,
				province:baseFormData.province,
				city:baseFormData.city,
				county:baseFormData.county,
				feature_label:baseFormData.checkbox3,
				shop_type:baseFormData.shop_type,
				shop_area:baseFormData.area,
				rent:baseFormData.rent,
				transfer_fee:baseFormData.transference,
				is_swerve:baseFormData.Rapid,
				detailed_introduction:baseFormData.introduce,
				channel_no:baseFormData.channel_no,
				detail_address:baseFormData.detail_address,
				link:baseFormData.link,
				// code:baseFormData.yzmcode,
				shop_type_one:baseFormData.shop_type_one,
				shop_type_two:baseFormData.shop_type_two,
			})

			console.log("params",params)
			// 判断这个表单是否提交过
			// 取到之前的表单
			// const params_rent = uni.getStorageSync('params_rent');
			// const params1 = JSON.stringify(params)
			// if(params1 == params_rent){
			// 	const seeking_rent_id = uni.getStorageSync('seeking_rent_id');
			// 	const seeking_rent_shop_type = uni.getStorageSync('seeking_rent_shop_type');
			// 	const seeking_rent_money = uni.getStorageSync('seeking_rent_money');
			// 	const pages = uni.getStorageSync('pages');
			// 	uni.navigateTo({
			// 		url: pages + '?shop_id=' + seeking_rent_id + '&shop_type=' + seeking_rent_shop_type + '&money=' + seeking_rent_money,
			// 	});
			// }else{
			// 	// 没有调教或者数据改变过
			// 	uni.setStorageSync('params_rent',JSON.stringify(params));				
				// 存储手机号
				uni.setStorageSync('phone', baseFormData.phone);
				onGotApiData('/h5/api/app/shop_rent/v2/add','POST',params,add_from)
			// }

	}

	// 表单提交之后返回的结果
	const add_from = (result) => {
		console.log("上传之后返回的结果",result)
		if(result.message){
		uni.showToast({
				title: result.message,
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		}else{
			uni.showToast({
				title: '发布成功',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			}) 
		}

	}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		background-color: rgba(246, 247, 251, 1);
		width: 750rpx auto;

		.adress{
			width: 710rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.adressName{
				width: 710rpx;
				height: 50rpx;
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				.name{
					width: 440rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					margin: 0 0 0 30rpx;
					// border: 2px solid black;
					.span1{
						font-size: 22rpx;
						color: #898989;
					}
				}
				.adree_icon{
					width: 170rpx;
					height: 40rpx;
					// border: 2px solid black;
					display: flex;
					.img{
						width: 18rpx;
						height: 22rpx;
						margin: 9rpx;
					}
					.text{
						width: 96rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #005CF1;
						line-height: 40rpx;
					}
				}
			}
			.adressTextarea{
				width: 640rpx;
				height: 80rpx;
				// border: 1px solid black;
				margin: 0 auto;
				padding-top: 10rpx;
				font-size: 28rpx;
				color: black;
				line-height: 40rpx;
			}
		}
		.user{
			width: 710rpx;
			// height: 200rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.user_item{
				width: 660rpx;
				height: 80rpx;
				padding-top: 20rpx;
				margin: 0 auto;
				display: flex;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				position: relative;
				.isjy{
					width: 300rpx;
					height: 30rpx;
					// border: 1px solid #999;
					position: absolute;
					top: 82rpx;
					left: 180rpx;
					z-index: 999;
					font-size: 22rpx;
					color: red;
					line-height: 30rpx;
					text-align: center;
				}
				.name{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 80rpx;
				}
				.user_input{
					width: 400rpx;
					height: 60rpx;
					padding: 10rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 60rpx;
				}
			}
		}
		.facilities{
			width: 710rpx;
			height: 320rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.facilities_item{
				width: 650rpx;
				height: 130rpx;
				padding-top: 30rpx;
				margin: 0 auto;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				position: relative;
				.name{
					width: 500rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}
				.isjy{
					width: 300rpx;
					height: 30rpx;
					// border: 1px solid #999;
					position: absolute;
					top: 140rpx;
					z-index: 999;
					font-size: 22rpx;
					color: red;
					line-height: 30rpx;
					text-align: center;
				}
				.item_delete{
					width: 650rpx;
					height: 90rpx;
					display: flex;
					// border: 1px solid black;
					.text{
						width: 560rpx;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						color: #C6C6C6;
					}
					.text1{
						width: 560rpx;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						color: #000;
						overflow: hidden;
					}
					.img{
						width: 24rpx;
						height: 20rpx;
						margin: 32rpx;
					}
					:deep(.input-value-border){
						border: none;
					}
					:deep(.input-value){
						margin-top: 10rpx;
						font-size: 28rpx;
						padding-left: 0;
					}
					:deep(.arrow-area){
						display: none;
					}
					:deep(.uni-icons){
						display: none;
					}
					
				}
			}
		}
		.SingleChoice{
			width: 710rpx;
			height: 140rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			margin: 0 auto;
			margin-top: 20rpx;
			margin-bottom: 140rpx;
			display: flex;
			.name{
				width: 200rpx;
				height: 140rpx;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 140rpx;
				color: rgba(0, 0, 0, 1);
				margin-left: 30rpx;
			}
			.chioce{
				width: 400rpx;
				height: 140rpx;
				display: flex;
				.chioce_item{
					width: 300rpx;
					height: 140rpx;
					display: flex;
					.img{
						width: 50rpx;
						height: 50rpx;
						margin: 45rpx 0 0 0;
					}
					.name{
						width: 100rpx;
						height: 140rpx;
						font-size: 28rpx;
						line-height: 140rpx;
						color: rgba(0, 0, 0, 1);
					}
				}
			}

		}
		.buttom{
			width: 710rpx;
			height: 100rpx;
			background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
			border-radius: 16rpx;
			position: fixed;
			bottom: 0;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			position: fixed;
			bottom: 10rpx;
			left: 20rpx;
		}
	}


	.Address{
		display: flex;
		.Address-item{
			width: 420rpx;
			height: 40rpx;
			padding-top: 16rpx;
			// background-color: pink;
		}
		.address_i{
			width: 22rpx;
			height: 22rpx;
			background: url('../../static/images/下箭头.png');
			background-size: 100%;
			margin: 22rpx 0 0 26rpx;
		}
	}
	.radio-groud{
		display: flex;
		margin: 6rpx 0 0 20rpx;

	}
	.hrone{
		width: 710rpx;
		height: 1rpx;
		margin-left: 10rpx;
		background-color: rgba(237, 237, 237, 1);
	}
	.my_chebox{
		width: 700rpx;
		height: 50rpx;
		// background-color: pink;
		color: black;
		font-size: 30rpx;
		font-weight: 700;
		margin: 20rpx 0 10rpx 1rpx;
		line-height: 50rpx;
		.span1{
			font-size: 28rpx;
			color: rgb(127, 130, 134);
		}
	}
	.feint_title{
		width: 720rpx;
		height: 120rpx;
		border: 1px solid rgba(235, 235, 235, 1);
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.title_sty{
			width: 720rpx;
			height: 60rpx;
			color: rgb(0, 0, 0);
			text-align: center;
		}
		// .feint_title_son{
		// 	color: rgba(0, 0, 0, 1);
		// 	font-size: 28rpx;
		// 	font-weight: 600;
		// 	line-height: 40rpx;
		// }
	}
	// 特色标签相关的穿透
	:deep(.uni-data-checklist){
		width: 740rpx;
		margin-left: 4rpx;
	}
	:deep(.uni-data-checklist .checklist-group .checklist-box.is--tag){
		padding: 8rpx 10rpx;
		font-size: 24rpx;
	}

.uni-input{
	color: #000;
	font-size: 28rpx;
	margin-left: 20rpx;
}
:deep(.uni-forms .imglist){
		width: 750rpx;
		height: 50rpx;
		// background-color: pink;
		color: rgb(44, 43, 43);
		font-family: '思源黑体';
		margin-left: 10rpx;
		font-size: 28rpx;
		font-weight: 600;.shopType{
	width: 750rpx;
	height: 300prx;
	margin: 0 auto;
	background-color: #fff;
	position:relative;
	.chacha{
		width: 58rpx;
		height: 58rpx;
		background: url(../../static/images/chacha.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 20rpx;
		left: 670rpx;
	}
	.title{
		width: 750rpx;
		padding-top: 20rpx;
		height: 90rpx;
		line-height: 70rpx;
		color: #000;
		text-align: center;
		font-size: 32rpx;
	}	
	.checkbox{
		width: 660rpx;
		margin: 0 auto;
		:deep(.uni-data-checklist){
			width: 710rpx;
			margin: 0 auto;
		}
	}
	.sure{
		width: 750rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		text-align: center;
		.colse{
			width: 200rpx;
			height: 60rpx;
			border: 1px solid #999;
			color: rgba(0, 92, 241, 1);
			border-radius: 10rpx;
		}
		.qr{
			width: 200rpx;
			height: 60rpx;
			background-color: rgba(0, 92, 241, 1);
			border: 1px solid rgba(0, 92, 241, 1);
			color: #fff;
			border-radius: 10rpx;
		}
	}
}
	}
	// 短信验证的样式
	.Verificationcode{
		width: 720rpx;
		height: 100rpx;
		// border: 1px solid black;
		border-top: 1px solid rgba(237, 237, 237, 1);
		display: flex;
		.codename{
			width: 154rpx;
			height: 100rpx;
			// background-color: pink;
			color: #000;
			margin: 0 0 0 0rpx;
			font-size: 28rpx;
			font-weight: 800;
			line-height: 100rpx;
		}
		#codeinput{
			width: 330rpx;
			height: 70rpx;
			// background-color: #F20;
			margin: 16rpx 0 0 40rpx;
			color: #000;
			font-size: 28rpx;
		}
		.gercode{
			width: 170rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background: rgba(252, 100, 66, 1);
			margin: 20rpx 0 0 0rpx;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 50rpx;
		}
		.nullcode{
			width: 200rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background: rgba(209, 209, 209, 1);
			margin: 20rpx 0 0 0rpx;
			color: rgba(56, 56, 56, 1);
			font-size: 28rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}
	.shopType{
	width: 750rpx;
	height: 300prx;
	margin: 0 auto;
	background-color: #fff;
	position:relative;
	.chacha{
		width: 58rpx;
		height: 58rpx;
		background: url(../../static/images/chacha.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 20rpx;
		left: 670rpx;
	}
	.title{
		width: 750rpx;
		padding-top: 20rpx;
		height: 90rpx;
		line-height: 70rpx;
		color: #000;
		text-align: center;
		font-size: 32rpx;
	}	
	.checkbox{
		width: 660rpx;
		margin: 0 auto;
		:deep(.uni-data-checklist){
			width: 710rpx;
			margin: 0 auto;
		}
	}
	.sure{
		width: 750rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		text-align: center;
		.colse{
			width: 200rpx;
			height: 60rpx;
			border: 1px solid #999;
			color: rgba(0, 92, 241, 1);
			border-radius: 10rpx;
		}
		.qr{
			width: 200rpx;
			height: 60rpx;
			background-color: rgba(0, 92, 241, 1);
			border: 1px solid rgba(0, 92, 241, 1);
			color: #fff;
			border-radius: 10rpx;
		}
	}
}

</style>
